@charset "utf-8";
@import './grid';
@import './layout';
@import './button';
@import './tag';
@import './alert';
@import './form';

// 清除浮动
@mixin clearfix {
    &:after {
        display: block;
        content: '';
        clear: both;
    }
}

// 定宽定高
@mixin size($width, $height: $width) {
    width: $width;
    height: $height;
    line-height: $height;
}

// 块级转换
@mixin inline-block {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    text-rendering: auto;
    vertical-align: middle;
}

// 透明度
@mixin opacity($opacity) {
    opacity: $opacity;
    filter: alpha(opacity=$opacity*100);
}

// 文本截取
@mixin text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 多行文本省略
@mixin lamp-clamp($line) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $line;
    -webkit-box-orient: vertical;
}

// Triangle helper mixin
// @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color, $size) {
    @include inline-block;
    width: 0;
    height: 0;
    content: '';
    font-size: 0;
    border-#{$direction}: $size solid $color;
    $perpendicular-borders: $size solid transparent;

    @if $direction==top or $direction==bottom {
        border-left: $perpendicular-borders;
        border-right: $perpendicular-borders;
    }

    @else if $direction==right or $direction==left {
        border-bottom: $perpendicular-borders;
        border-top: $perpendicular-borders;
    }
}

// Only display content to screen readers
// See: http://a11yproject.com/posts/how-to-hide-content
@mixin sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {

    &:active,
    &:focus {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
    }
}

// center block
@mixin center-block {
    position: relative;
    display: block;
    width: 1000px;
    margin: 0 auto;
}

// Lists
// Unstyled keeps list items block level, just removes default browser padding and list-style
@mixin list-unstyled {
    padding-left: 0;
    list-style: none;
}

// Only display content to screen readers
// See: http://a11yproject.com/posts/how-to-hide-content
@mixin sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

// Use in conjunction with .sr-only to only display content when it's focused.
// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
// Credit: HTML5 Boilerplate
@mixin sr-only-focusable {

    &:active,
    &:focus {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
    }
}

// WebKit-style focus
@mixin tab-focus() {
    // WebKit-specific. Other browsers will keep their default outline style.
    // (Initially tried to also force default via `outline: initial`,
    // but that seems to erroneously remove the outline in Firefox altogether.)
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

// Tags
@mixin badge-variant($color) {
    background-color: $color;

    &[href] {
        @include hover-focus {
            background-color: darken($color, 10%);
        }
    }
}

// Single side border-radius
@mixin border-radius($radius: $border-radius) {
    @if $enable-rounded {
        border-radius: $radius;
    }
}

@mixin border-top-radius($radius) {
    @if $enable-rounded {
        border-top-right-radius: $radius;
        border-top-left-radius: $radius;
    }
}

@mixin border-right-radius($radius) {
    @if $enable-rounded {
        border-bottom-right-radius: $radius;
        border-top-right-radius: $radius;
    }
}

@mixin border-bottom-radius($radius) {
    @if $enable-rounded {
        border-bottom-right-radius: $radius;
        border-bottom-left-radius: $radius;
    }
}

@mixin border-left-radius($radius) {
    @if $enable-rounded {
        border-bottom-left-radius: $radius;
        border-top-left-radius: $radius;
    }
}

// hover
@mixin hover {
    &:hover {
        @content;
    }
}

// hover and focus
@mixin hover-focus {

    &:focus,
    &:hover {
        @content;
    }
}